<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://sduept.security.el/func"
	template="/template/template.xhtml">
	<ui:define name="head">
		<title>#{request.getParameter('selectName')} 输电线路故障分析</title>
		<link rel="stylesheet"
			href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link rel="stylesheet"
			href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
		
/* .nav li a, .box-title {
	// 控制tab标题的字号
	font-size: 16px;
}
 */

.wrap-condition .form-inline {
	float: left;
	margin: 0px 5px;
}

#startYear, #endYear {
    padding: 6px 2px;
    width: 70px;
    text-align: center;
}

.info-box-content {
	line-height: 80px;
	height: 80px;
	font-size: 20px;
}

</style>
	</ui:define>
	<ui:define name="content">
		<div class="nav-tabs-custom">
			<ul class="nav nav-tabs pull-left">
				<li class="active"><a href="#pane1" data-toggle="tab">故障次数统计</a></li>
				<li id="faultDeviceLi"><a href="#faultDeviceTab" data-toggle="tab">故障类型统计</a></li>
				<li id="li2"><a href="#pane2" id="tab2" data-toggle="tab">故障综合原因</a></li>
				<li><a href="#pane3" id="tab3" data-toggle="tab">故障具体原因</a></li>
			</ul>
			<div class="tab-content no-padding">
				<div class="chart tab-pane active" id="pane1">
					<div class="box box-primary">
						<div style="height: 50px; padding-top: 10px;">
							<h:form id="queryForm">
								<p:outputLabel value="查询时间：" style="margin-left:10px;" />
								<input type="text" id="firstYear" style="width:80px;height:30px;text-align:center;margin-right:5px;" />
								<p:outputLabel value="至 ：" style="margin-left:10px;" />
								<input type="text" id="lastYear" style="width:80px;height:30px;text-align:center;margin-right:5px;" />
								<p:outputLabel value="电压等级：" style="margin-left:10px;" />
								<h:selectOneMenu style="width:110px;height:30px" id="vol">
									<f:selectItem itemValue="0" itemLabel="220kV及以上"/>
									<f:selectItem itemValue="220" itemLabel="220kV"/>
									<f:selectItem itemValue="500" itemLabel="500kV"/>
								</h:selectOneMenu>
								<p:commandButton icon="ui-icon-search" value="查询" style="margin-left:10px;" onclick="getLineFaultsCountData();" />
							</h:form>
						</div>
					</div>
					<div style="overflow:auto; height: 706px">
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title">输电线路历史故障次数统计</h3>
								</div>
								<div class="box-body">
									<div id="faultNumLine" style="height: 300px;" />
								</div>
							</div>
						</div>
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title lineRunTitle" />
									<p:commandButton value="数据维护" icon="ui-icon-document"
										style="float:right" onclick="PF('dataDlg').show()"
										update="form:dataTable"
										rendered="#{s:hasPermission(session,'tjfx_sbgztjfx_sdxl_sjwh')}" />
								</div>
								<div class="box-body">
									<div id="lineOperation" style="height: 300px;" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="chart tab-pane" id="faultDeviceTab">
					<div class="box box-primary">
						<div style="height: 50px; padding-top: 10px;">
							<h:form id="queryForm1">
								<p:outputLabel value="查询时间：" style="margin-left:10px;" />
								<input type="text" id="year_id" style="width:80px;height:30px;text-align:center;margin-right:5px;" />
								<p:outputLabel value="电压等级：" style="margin-left:10px;" />
								<h:selectOneMenu style="width:110px;height:30px" id="vol1">
									<f:selectItem itemValue="0" itemLabel="220kV及以上"/>
									<f:selectItem itemValue="220" itemLabel="220kV"/>
									<f:selectItem itemValue="500" itemLabel="500kV"/>
								</h:selectOneMenu>
								<p:commandButton icon="ui-icon-search" value="查询" style="margin-left:10px;" onclick="getFaultTypeDataByYear();" />
							</h:form>
						</div>
					</div>
					<div style="overflow:auto; height: 705px">
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title" id='faultTypeTime'>输电线路故障类型占比分析</h3>
								</div>
								<div class="box-body">
									<div id="faultTypePie" style="height: 350px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"></div>
								</div>
							</div>
						</div>
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title" id='faultTypeTime'>各单位输电线路故障类型统计</h3>
								</div>
								<div class="box-body">
									<div id="faultTypeCompany" style="height: 350px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="chart tab-pane" id="pane2">
					<div class="box box-primary">
						<div style="height: 50px; padding-top: 10px;">
							<h:form id="queryForm2">
								<p:outputLabel value="查询时间 ：" style="margin-left:10px;" />
								<input type="text" id="year" style="width:80px;height:30px;text-align:center;margin-right:5px;" />
								<p:outputLabel value="电压等级：" style="margin-left:10px;" />
								<h:selectOneMenu style="width:110px;height:30px" id="vol2">
									<f:selectItem itemValue="0" itemLabel="220kV及以上"/>
									<f:selectItem itemValue="220" itemLabel="220kV"/>
									<f:selectItem itemValue="500" itemLabel="500kV"/>
								</h:selectOneMenu>
								<p:commandButton icon="ui-icon-search" value="查询" style="margin-left:10px;" onclick="onYearChanged();" />
							</h:form>
						
						</div>
					</div>
					<div style="overflow:auto; height: 705px">
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"> <span class='year'></span>年输电线路故障次数月度统计</h3>
								</div>
								<div class="box-body">
									<div id="fault_month_line" style="height: 350px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"></div>
								</div>
							</div>
						</div>
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><span class='year'></span>年输电线路故障原因次数统计</h3>
								</div>
								<div class="box-body">
									<div id="chart_fault_all_bar" style="height: 350px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"></div>
								</div>
							</div>
						</div>
						<div class="col-md-12 col-sm-12 no-padding">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><span class='year'></span>年输电线路故障原因比例统计</h3>
								</div>
								<div class="box-body">
									<div id="chart_fault_all_bar_ring" style="height: 350px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="chart tab-pane" id="pane3">
					<div class="box box-primary">
						<div class="box-body">
							<div class='wrap-condition'>
								<div class='form-inline'>
									<label>故障类型：</label> <select id="chooseType"
										class='type form-control'>
										<option selected="selected">雷击</option>
										<option>覆冰</option>
										<option>树木放电</option>
										<option>山火</option>
										<option>鸟害</option>
										<option>外力破坏</option>
										<option>舞动或风偏</option>
										<option>异物</option>
										<option>污闪</option>
									</select>
								</div>
								<div class='form-inline'>
									<label>年份：</label> 
									<input type="text" id="startYear" class='type form-control' /> 至 
									<input type="text" id="endYear" class='type form-control' />
								</div>
								<div class='form-inline'>
									<label>电压等级：</label> <select id="voltage"
										class='type form-control'>
										<option selected="selected" value="0">全部</option>
										<option value="500">500kV</option>
										<option value="220">220kV</option>
									</select>
								</div>
								<button class='btn btn-default' id='check-btn'>查询</button>
							</div>
						</div>
					</div>
					<div style="overflow:auto; height: 700px">
						<div class="info-box bg-yellow">
							<span class="info-box-icon"> <i class="icon ion-pie-graph"></i>
							</span>
							<div class="info-box-content" id="total"></div>
						</div>
						
						<div class="box" >
							<div id="thunder" class="show-details">
								<div class="col-md-12 col-sm-12 no-padding" id='yearCount'
									style='display: none'>
									<div class="box box-primary">
										<div class="box-header with-border">
											<h3 class="box-title">
												<span id='yearCountLineTitle'></span>
											</h3>
										</div>
										<div class="box-body">
											<div id="yearCountLine" style="height: 250px"></div>
										</div>
									</div>
								</div>
								<div class="col-md-12 col-sm-12 no-padding">
									<div class="box box-primary">
										<div class="box-header with-border">
											<h3 class="box-title">
												<span id='lineTitle'></span>
											</h3>
										</div>
										<div class="box-body">
											<div id="fault_line" style="height: 250px"></div>
										</div>
									</div>
								</div>
								<div class="col-md-12 col-sm-12 no-padding">
									<div class="box box-primary">
										<div class="box-header with-border">
											<h3 class="box-title">
												<span id='faultTypeTitle'></span>
											</h3>
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool" onclick="getMaxChart('faultType_pie')">
													<i class="fa  fa-square-o"></i>
												</button>
											</div>
										</div>
										<div class="box-body" id="faultType">
											<div id="faultType_pie" style="height: 250px;"></div>
											<div id="faultTypeTbDiv" style="display: none">
												<table id="faultTypeTable"
													class="table table-bordered table-hover">
												</table>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12 col-sm-12 no-padding">
									<div class="box box-primary">
										<div class="box-header with-border">
											<h3 class="box-title">
												<span id='pieTitle'></span>
											</h3>
										</div>
										<div class="box-body">
											<div id="fault_pie" style="height: 250px;"></div>
										</div>
									</div>
								</div>
								<div class="col-md-12 col-sm-12 no-padding">
									<div class="box box-primary">
										<div class="box-header with-border">
											<h3 class="box-title">
												<span id='barTitle'></span>
											</h3>
										</div>
										<div class="box-body">
											<div id="fault_multi_bar" style="height: 250px;"></div>
										</div>
									</div>
								</div>
								<div class="col-md-12 col-sm-12 no-padding" id="companyYear">
									<div class="box box-primary">
										<div class="box-header with-border">
											<h3 class="box-title">
												<span id='companyYearTitle'></span>
											</h3>
										</div>
										<div class="box-body">
											<div id="companyYearLine" style="height: 250px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<p:dialog widgetVar="dataDlg" header="输电线路数据维护" modal="true"
			id="dataDlg" width="1000" height="400" onHide="initDatas()">
			<h:form id="form">
				<p:toolbar id="toolbar">
					<f:facet name="left">
						<p:commandButton value="新建" icon="fa fa-plus"
							actionListener="#{transmissionLineController.preCreat}"
							onclick="PF('createDlg').show()" update="createDlg" />
						<p:commandButton value="编辑" icon="fa fa-pencil"
							actionListener="#{transmissionLineController.preEdit}"
							disabled="#{transmissionLineController.select.id == null}"
							onclick="PF('createDlg').show()" update="createDlg" id="edit" />
						<p:commandButton value="删除" icon="fa fa-trash"
							actionListener="#{transmissionLineController.deleteTansmissionLineInfo}"
							disabled="#{transmissionLineController.select.id == null}"
							update="form:dataTable form:edit form:delete form:msgs"
							id="delete">
							<p:confirm header="提示" message="确定删除该记录吗?" icon="ui-icon-alert" />
						</p:commandButton>
						<p:growl id="msgs" showDetail="true" />
					</f:facet>
				</p:toolbar>
				<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
					<p:commandButton value="是" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
					<p:commandButton value="否" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
				</p:confirmDialog>
				<p:dataTable id="dataTable" emptyMessage="无记录"
					value="#{transmissionLineController.tansmissionLineInfos}"
					var="item" rowKey="#{item.id}" rowIndexVar="ite"
					paginator="true" rows="20"
					selection="#{transmissionLineController.select}"
					paginatorTemplate="{Customization} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="20,50,100" paginatorPosition="bottom"
					style="text-align:center;margin-top:3px">
					<f:facet name="{Customization}">
						<p:outputLabel value="总计：#{transmissionLineController.tansmissionLineInfos.size()} 条记录" style="margin-right:20px;" />
					</f:facet>
					<p:ajax event="rowSelectRadio" listener="#{transmissionLineController.onRowSelect}" update="form:edit form:delete" />
					<p:column selectionMode="single" width="60" style="text-align:center" />
					<p:column width="60" headerText="序号">
						<h:outputText value="#{ite+1}" />
					</p:column>
					<p:column headerText="年" sortBy="#{item.year}">
						<p:outputLabel value="#{item.year}" />
					</p:column>
					<p:column headerText="电压等级">
						<p:outputLabel value="#{item.voltage}" />
					</p:column>
					<p:column headerText="线路总长" sortBy="#{item.length}">
						<p:outputLabel value="#{item.length}" />
					</p:column>
					<p:column headerText="新增长度" sortBy="#{item.newAdd}">
						<p:outputLabel value="#{item.newAdd}" />
					</p:column>
				</p:dataTable>
			</h:form>
		</p:dialog>
		<p:dialog widgetVar="createDlg" header="数据维护" width="350" height="250">
			<h:form id="createDlg">
				<p:toolbar>
					<f:facet name="left">
						<p:commandButton value="保存" icon="ui-icon-disk"
							onclick="PF('createDlg').hide()"
							actionListener="#{transmissionLineController.saveTansmissionLineInfo}"
							update="form:msgs form:edit form:delete form:dataTable">
						</p:commandButton>
					</f:facet>
				</p:toolbar>
				<p:outputPanel>
					<p:panelGrid columns="2">
						<p:outputLabel value="线路长度" />
						<p:inputText label="content"
							value="#{transmissionLineController.current.length}" />
						<p:outputLabel value="年" />
						<p:inputNumber value="#{transmissionLineController.year}" maxValue="2500" thousandSeparator="" decimalPlaces="0"/>
						<p:outputLabel value="电压等级" />
						<h:selectOneMenu value="#{transmissionLineController.voltage}" style="width: 120px;height:30px">
							<f:selectItem itemValue="500" itemLabel="500kV" />
							<f:selectItem itemValue="220" itemLabel="220kV" />
							<f:selectItem itemValue="0" itemLabel="220kV及以上" />
						</h:selectOneMenu>
					</p:panelGrid>
				</p:outputPanel>
			</h:form>
		</p:dialog>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js" />
		<script
			src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js" />
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js" />
		<script
			src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/timeline.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/charts.js" />
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js" />
		<script
			src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js" />
		<script
			src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js" />
		<script src="#{request.contextPath}/resources/js/array-util.js" />
		<script src="faultEquipmentStatisticsEcharts.js" />
		<script src="shudianxianluFault.js" />
		<script src="transmissionLine.js" />
		<script>
		function getMaxChart(chartId){
			var title=$("#"+chartId).closest(".box").find("span").first().html();
			var w = document.documentElement.clientWidth || document.body.clientWidth;
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			$("#"+chartId).height(h*0.8-50);
			$("#"+chartId).width(w*0.8-50);
			var newLayer=layer.open({
				type : 1,
				shade : false,
				title : title, 
				content : $("#"+chartId),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
				area: [w*0.8+'px', h*0.8+'px'],
				scrollbar: false,
				cancel:function(){
					var width=parseInt($("#pane3").css("width"))-20;
					$("#"+chartId).height(250);
					$("#"+chartId).width(width);
					faultType_pie.getChart().resize();
					faultType_pie.getChart().on("click",function(params){
						   if(faultTypeTableShow &amp;&amp; selectedFaultType==params.name){
							   $("#faultTypeTbDiv").hide();
							   faultTypeTableShow = false;
						   }else{
							   selectedFaultType=params.name;
							   $("#faultTypeTbDiv").show();
							   faultTypeTableShow = true;
							   $.getJSON('/rest/transmissionline/getLineFaultDetail/'+startYear+'/'+endYear+'/'+type+"/"+voltage+"/"+selectedFaultType, function(result) {
								   initFaultTables(result);
								});
						   }
					  });
				}
			});
			//layer.full(newLayer);//弹出即全屏
			faultType_pie.getChart().resize();
			faultType_pie.getChart().off("click");
		}
		</script>
	</ui:define>
</ui:composition>